<template>
  <div class="dataCheck">
    <div class="card">
      <el-form label-width="80px">
        <el-form-item label="模板下载">
          <el-button
            size="mini"
            type="primary"
            @click="handleExportEnterprise">
            点击下载
          </el-button>
        </el-form-item>
        <el-form-item label="文件上传">
          <el-upload
            class="upload-demo"
            drag
            ref="fileUpload"
            :action="uploadFileUrl"
            :headers="headers"
            :multiple="false"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-error="handleUploadError"
            :on-success="handleUploadSuccess">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">
              <p class="attentionInfo">
                1、仅支持xlsx文件格式，文件条数不得超过50000条；
              </p>
              <p class="attentionInfo">
                2、上传表格时，需严格按照下载模式，根据模版表头的文字修改；
              </p>
              <p class="attentionInfo">
                3、输出内容为，区间字段；
              </p>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <p v-if="uploadComplete">
<!--        累计使用的点数{{usedPoints}}，当前账号剩余的点数{{surplusPoints}}，-->
        本次请求扣除的点数{{deductPoints}}。
      </p>
<!--      <el-table-->
<!--        v-if="tableData.length"-->
<!--        height="500"-->
<!--        :data="tableData"-->
<!--        style="width: 100%">-->
<!--        <el-table-column prop="entName" label="公司"></el-table-column>-->
<!--        <el-table-column prop="phone" label="号码"></el-table-column>-->
<!--        <el-table-column prop="legalPerson" label="法人"></el-table-column>-->
<!--        <el-table-column prop="position" label="职位"></el-table-column>-->
<!--      </el-table>-->
    </div>
  </div>
</template>
<script>
import {getToken} from "@/utils/auth";
import router from '@/router';
export default {
  data() {
    return {
      //上传相关
      fileType: [ "xls", "xlsx" ],
      fileSize: 35,
      uploadFileUrl: "http://query.anjieke.cn/prod-api/bangXunKe/importDataVerification", // 上传文件服务器地址
      headers: { Authorization: "Bearer " + getToken() },
      tableData: [],
      deductPoints: 0,
      surplusPoints: 0,
      usedPoints: 0,
      uploadComplete: false
    }
  },
  methods: {
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      const fileName = file.name.split('.');
      const fileExt = fileName[fileName.length - 1];
      const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
      if (!isTypeOk) {
        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
        return false;
      }
      // 校检文件大小
      const isLt = file.size / 1024 / 1024 < this.fileSize;
      if (!isLt) {
        this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
        return false;
      }
      this.$modal.loading("正在上传文件，请稍候...");
      return true;
    },
    // 上传失败
    handleUploadError(err) {
      this.$modal.msgError("上传文件失败，请重试");
      this.$modal.closeLoading();
      this.uploadComplete = false;
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      const { status, data} = res;
      if (status === 1) {
        const { checkedData, pointInfo } = data;
        const { deductPoints, surplusPoints, usedPoints } = pointInfo;
        this.deductPoints = deductPoints;
        this.surplusPoints = surplusPoints;
        this.usedPoints = usedPoints;
        this.tableData = checkedData;
        this.$modal.closeLoading();
        this.uploadComplete = true;
      } else {
        this.$modal.closeLoading();
        this.$modal.msgError(res.msg);
        this.$refs.fileUpload.handleRemove(file);
        this.uploadComplete = false;
      }
    },
    handleExportEnterprise() {
      const params = { ...this.searchParams };
      this.download('/bangXunKe/dataVerification', params, `数据校验模版.xlsx`)
    },
  }
}
</script>
<style lang="scss" scoped>
div.dataCheck {
  height: 100%;
  div.card{
    padding: 14px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #f1f8fe;
    p {
      height: 26px;
      line-height: 26px;
      margin: 0;
    }
  }
}

</style>
